const wrapperClass = "es6-modal-wrapper";


class Modal {
    constructor() {

    }

    hide() {
        $("." + wrapperClass).modal("hide");
    }

    // 基本弹窗 -（
    //  有title --- 需要自定义title名
    //  有content --- 自定义内容
    //  有默认按钮 --- 确认和取消
    show4(title, content, opt) {
        const tpl = `<div class="modal fade ${wrapperClass}" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header default-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title default-title">${title}</h4>
					</div>
                    <div class="modal-body"></div>
                    <div class="modal-footer default-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确认</button>
                    </div>
                </div>
            </div>
        </div>`;

        $("." + wrapperClass).remove();

        let $el = $(tpl);
        $el.find(".modal-body").html(content);
        $el.appendTo($("body"));
//$el.appendTo($("container-fluid"));
        if (opt && opt.onReady) opt.onReady.call(this, $el);

        $el.find(".btn.btn-primary").click(() => {
            if (opt && opt.onOk) opt.onOk.call(this, $el);
        });

        $el.find(".btn.btn-default").click(() => {
            if (opt && opt.onCancel) opt.onCancel.call(this, $el);
        });

        $el.modal();
    }
    
    // 基本弹窗 -（
    //  有title --- 需要自定义title名
    //  有content --- 自定义内容
    //  有默认按钮 --- 确认和取消
    show(title, content, opt) {
        const tpl = `<div class="modal fade ${wrapperClass}" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header default-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title default-title">${title}</h4>
					</div>
                    <div class="modal-body"></div>
                </div>
            </div>
        </div>`;

        $("." + wrapperClass).remove();

        let $el = $(tpl);
        $el.find(".modal-body").html(content);
        $el.appendTo($("body"));
//$el.appendTo($("container-fluid"));
        if (opt && opt.onReady) opt.onReady.call(this, $el);

        $el.find(".btn.btn-primary").click(() => {
            if (opt && opt.onOk) opt.onOk.call(this, $el);
        });

        $el.find(".btn.btn-default").click(() => {
            if (opt && opt.onCancel) opt.onCancel.call(this, $el);
        });

        $el.modal();
    }


    // 弹窗2 -（
    //  有title --- 需要自定义title名
    //  有content --- 自定义内容
    //  有一个按钮 --- 可自定义文本 默认为确认
    show2(title, content, opt) {
        const tpl = `
        <div class="modal fade ${wrapperClass}" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
				        <div class="modal-content">
				            <div class="modal-header default-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title default-title">${title}</h4>
                    </div>
                    <div class="modal-body"></div>
                    <div class="modal-footer single-footer">
                        <button type="button" class="btn btn-primary">${opt.btnText ? opt.btnText : '确认'}</button>
                    </div>
                </div>
            </div>
        </div>`;

        $("." + wrapperClass).remove();

        let $el = $(tpl);
        $el.find(".modal-body").html(content);
        $el.appendTo($("body"));

        if (opt && opt.onReady) opt.onReady.call(this, $el);

        $el.find(".btn.btn-primary").click(() => {
            if (opt && opt.onOk) opt.onOk.call(this, $el);
        });

        $el.modal();
    }

    // 弹窗3 -（  -- 白底 仿IOS-confirm弹窗
    //  有title --- 需要自定义title
    //
    //  有两个按钮 --- 确认和取消
    show3(title, opt) {
        const tpl = `
        <div class="modal fade ${wrapperClass}" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
				        <div class="modal-content ios-wrapper">
				            <div class="modal-header ios-header">
                        <h4 class="modal-title">${title}</h4>
                    </div>
                    <div class="modal-footer ios-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确认</button>
                    </div>
                </div>
            </div>
        </div>`;

        $("." + wrapperClass).remove();

        let $el = $(tpl);
        $el.appendTo($("body"));

        if (opt && opt.onReady) opt.onReady.call(this, $el);

        $el.find(".btn.btn-primary").click(() => {
            if (opt && opt.onOk) opt.onOk.call(this, $el);
        });

        $el.modal();
    }
}

export default new Modal();
